<template>
  <div class="app-container" :loading="submitLoading">
    <div class="filter-container">
      <div style="align-items: center;display: flex;">
        <el-button type="primary" icon="el-icon-plus" @click="add">
          添加
        </el-button>
      </div>
    </div>
    <!-- 列表 -->
    <el-table
        :data="list"
        style="width: 100%;margin-bottom: 20px;"
        v-loading="listLoading"
        row-key="id"
        border
        lazy
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column type="index" label="id" prop="id" align="center" width="70">
        <template slot-scope="{row}">
          <span>{{ row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" align="left">
        <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="排序" align="center" width="50">
        <template slot-scope="scope">
          <span @click="list_detail(scope)">{{scope.row.sort}}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="130">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="修改" placement="top">
            <el-button size="mini" icon="el-icon-edit" type="success" @click="edit(scope.row)">
              <!-- 修改 -->
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-popconfirm title="确定删除吗？" @onConfirm="list_del(scope)">
              <el-button slot="reference" style="margin-left: 10px;" size="mini" icon="el-icon-delete" type="danger">
                <!-- 删除 -->
              </el-button>
            </el-popconfirm>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 各个弹框-->
    <el-dialog title="编辑" :visible.sync="popup_edit_show" width="50%" center>
      <div class="add_over">
        <el-form ref="diary_details" :rules="rules" :model="diary_details" label-width="125px" style="text-align: left;">
          <el-form-item label="父级" prop="pid">
              <el-cascader
                  :options="drop_list_1"
                  v-model="diary_details.pid"
                  :props="{checkStrictly: true,label:'title',value:'id',emitPath:false}"
                  clearable @change="handleChange()">
              </el-cascader>
          </el-form-item>
          <el-form-item label="路由名称" prop="title">
            <el-input type="type" v-model="diary_details.title" autocomplete="off" placeholder="请输入路由名称"></el-input>
          </el-form-item>
          <el-form-item label="路由地址" prop="path">
            <el-input type="type" v-model="diary_details.path" autocomplete="off" placeholder="请输入路由地址"></el-input>
          </el-form-item>
          <el-form-item label="name" prop="name">
            <el-input type="type" v-model="diary_details.name" autocomplete="off" placeholder="请输入name"></el-input>
          </el-form-item>
          <el-form-item label="组件对象">
            <el-input type="type" v-model="diary_details.component" autocomplete="off" placeholder="请输入组件对象"></el-input>
          </el-form-item>
          <el-form-item label="跳转路径" >
            <el-input type="type" v-model="diary_details.redirect" autocomplete="off" placeholder="请输入跳转路径"></el-input>
          </el-form-item>
          <el-form-item label="图标名称">
            <el-input type="type" v-model="diary_details.icon" autocomplete="off" placeholder="请输入图标名称"></el-input>
          </el-form-item>
          <el-form-item label="高亮活动菜单">
            <el-input type="type" v-model="diary_details.active_menu" autocomplete="off" placeholder="请输入活动菜单"></el-input>
          </el-form-item>
          <el-form-item label="总是展示">
            <!-- <el-input type="number" v-model="diary_details.always_show" autocomplete="off" placeholder="请输入总是展示"></el-input> -->
            <el-tooltip :content="diary_details.always_show==1? '当前展示' :'当前不展示'  " placement="top">
              <el-switch
                v-model="diary_details.always_show"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="是否隐藏">
            <!-- <el-input type="number" v-model="diary_details.hidden" autocomplete="off" placeholder="请输入"></el-input> -->
            <el-tooltip :content="diary_details.hidden==1? '当前隐藏' :'当前不隐藏'  " placement="top">
              <el-switch
                v-model="diary_details.hidden"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="是否缓存">
            <!-- <el-input type="number" v-model="diary_details.no_cache" autocomplete="off" placeholder="请输入"></el-input> -->
            <el-tooltip :content="diary_details.no_cache==1? '当前缓存' :'当前不缓存'  " placement="top">
              <el-switch
                v-model="diary_details.no_cache"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="是否固定">
            <!-- <el-input type="number" v-model="diary_details.affix" autocomplete="off" placeholder="请输入"></el-input> -->
            <el-tooltip :content="diary_details.affix==1? '当前固定' :'当前不固定'  " placement="top">
              <el-switch
                v-model="diary_details.affix"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="是否展示在面包屑">
            <!-- <el-input type="number" v-model="diary_details.breadcrumb" autocomplete="off" placeholder="请输入"></el-input> -->
            <el-tooltip :content="diary_details.breadcrumb==1? '当前展示' :'当前不展示'  " placement="top">
              <el-switch
                v-model="diary_details.breadcrumb"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="排序">
            <el-input type="number" v-model="diary_details.sort" autocomplete="off" placeholder="从大到小"></el-input>
            <span class="sort-class">排序从大到小</span>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="popup_edit_show = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submit_edit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加" :visible.sync="popup_add_show" width="50%" center>
      <div class="add_over">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="addForm" label-width="125px" class="demo-ruleForm">
          <el-form-item label="父级" prop="pid">
            <!-- <el-input type="number" v-model="ruleForm.pid" autocomplete="off" placeholder="请输入"></el-input> -->
              <el-cascader
                  :options="drop_list"
                  v-model="ruleForm.pid"
                  :props="{checkStrictly: true,label:'title',value:'id',emitPath:false}"
                  clearable>
              </el-cascader>
          </el-form-item>
          <el-form-item label="路由名称" prop="title">
            <el-input type="type" v-model="ruleForm.title" autocomplete="off" placeholder="请输入路由名称"></el-input>
          </el-form-item>
          <el-form-item label="路由地址" prop="path">
            <el-input type="type" v-model="ruleForm.path" autocomplete="off" placeholder="请输入路由地址"></el-input>
          </el-form-item>
          <el-form-item label="name" prop="name">
            <el-input type="type" v-model="ruleForm.name" autocomplete="off" placeholder="请输入name"></el-input>
          </el-form-item>
          <el-form-item label="组件对象">
            <el-input type="type" v-model="ruleForm.component" autocomplete="off" placeholder="请输入组件对象"></el-input>
          </el-form-item>
          <el-form-item label="跳转路径" >
            <el-input type="type" v-model="ruleForm.redirect" autocomplete="off" placeholder="请输入跳转路径"></el-input>
          </el-form-item>
          <el-form-item label="图标名称">
            <el-input type="type" v-model="ruleForm.icon" autocomplete="off" placeholder="请输入图标名称"></el-input>
          </el-form-item>
          <el-form-item label="高亮活动菜单">
            <el-input type="type" v-model="ruleForm.active_menu" autocomplete="off" placeholder="请输入活动菜单"></el-input>
          </el-form-item>
          <el-form-item label="总是展示">
            <!-- <el-input type="number" v-model="ruleForm.always_show" autocomplete="off" placeholder="请输入展示"></el-input> -->
            <el-tooltip :content="ruleForm.always_show==1? '当前展示' :'当前不展示'  " placement="top">
              <el-switch
                v-model="ruleForm.always_show"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="是否隐藏">
            <!-- <el-input type="number" v-model="ruleForm.hidden" autocomplete="off" placeholder="请输入"></el-input> -->
            <div>
              <el-tooltip :content=" ruleForm.hidden==1? '当前隐藏' :'当前不隐藏'  " placement="top">
                <el-switch
                  v-model="ruleForm.hidden"
                  active-value="1"
                  inactive-value="0">
                </el-switch>
              </el-tooltip>
            </div>
          </el-form-item>
          <el-form-item label="是否缓存">
            <!-- <el-input type="number" v-model="ruleForm.no_cache" autocomplete="off" placeholder="请输入"></el-input> -->
            <el-tooltip :content="ruleForm.no_cache==1? '当前缓存' :'当前不缓存'  " placement="top">
              <el-switch
                v-model="ruleForm.no_cache"
                active-value="1"
                inactive-value="0">
              </el-switch>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="是否固定">
            <!-- <el-input type="number" v-model="ruleForm.affix" autocomplete="off" placeholder="请输入"></el-input> -->
            <el-tooltip :content="ruleForm.affix==1? '当前固定' :'当前不固定'  " placement="top">
              <el-switch
                v-model="ruleForm.affix"
                active-value="1"
                inactive-value="0">
              </el-switch>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="是否展示在面包屑">
            <!-- <el-input type="number" v-model="ruleForm.breadcrumb" autocomplete="off" placeholder="请输入"></el-input> -->
            <el-tooltip :content="ruleForm.breadcrumb==1? '展示在面包屑' :'不展示'  " placement="top">
              <el-switch
                v-model="ruleForm.breadcrumb"
                active-value="1"
                inactive-value="0">
              </el-switch>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="排序">
            <el-input type="number" v-model="ruleForm.sort" autocomplete="off" placeholder="从大到小"></el-input>
            <span class="sort-class">排序从大到小</span>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="popup_add_show = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submit_add()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    menus_del,
    menus_add,
    menus_edit,
    menus_list,
    role_list
  } from '@/api/setup/setup_menus'
  export default {
    name: 'setup_menus',
    data() {
      return {
        drop_list:[],
        drop_list_1:[],
        value: '100',
        list_role:{},
        ruleForm: {
          title: '',
          content: '',
          always_show:"1",
          hidden:"0",
          no_cache:"0",
          affix:"0",
          breadcrumb:"0",
          sort: 0,
        },
        rules: {
          pid:[{
            required: true,
            message: '请输入父级id',
            trigger: 'blur'
          }],
          title:[{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }],
          path:[{
            required: true,
            message: '请输入路由路径',
            trigger: 'blur'
          }],
          name:[{
            required: true,
            message: '请输入name',
            trigger: 'blur'
          }]
        },
        listLoading: 0,
        submitLoading: false,
        popup_edit_show: false,
        popup_add_show: false,
        diary_details: {
          always_show:1,
          hidden:0,
          no_cache:0,
          affix:0,
          breadcrumb:0,
          sort: 0,
        },
        dialogVisible: false,
        list:[

        ],
        listQuery: {
          keyword:"",
        },
        // tableKey: 1,
        currentPage: 1,
        page_count: 0,
        page_limit: 10,
      }
    },
    created() {
      this.getList()
      this.getrole()
    },
    mounted() {

    },
    methods: {
      //获取角色列表
      getrole(){
        role_list().then(res=>{
          console.log(res.data,"sss")
          this.list_role=res.data
        })
      },
      // 获取列表数据
      getList(page, limit, listQuery) {
        page = page || this.currentPage
        limit = limit || this.page_limit
        //定义listquery，为了下方可以使用key_word.....
        listQuery = listQuery || this.listQuery
        let keyWord = listQuery.keyword || ''
        console.log('9999999999',listQuery.searchTime)
        // let searchTime = listQuery.searchTime && listQuery.searchTime.length>0 ? listQuery.searchTime.toString() : ''
        this.listLoading = true
        menus_list(page, limit, keyWord).then(res => {
          console.log(res, "公告")
          this.list = res.data
          this.drop_list=JSON.parse(JSON.stringify(res.data))
          this.drop_list_1=JSON.parse(JSON.stringify(res.data))
          this.page_count = res.count
          this.drop_list.unshift({
                'id':999999,
                'title':"顶级",
                'pid':'0'
          })
          this.drop_list_1.unshift({
                'id':999999,
                'title':"顶级",
                'pid':'0'
          })
          // this.drop_list.shift()
          console.log(this.drop_list)
          this.listLoading = false
        })
      },
      //搜索事件
      searchList(){
        console.log(this.currentPage,"222")
        this.getList(1, this.page_limit, this.listQuery)
      },
      //每页几条数据
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page_limit = val
        this.getList(1, val,this.listQuery);
      },
      //跳转到
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val
        this.getList(val, this.page_limit,this.listQuery);
      },
      //新增数据提交
      submit_add() {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.submitLoading = true
            console.log("提交")
            menus_add(this.ruleForm).then(res => {
                if (res.code == 200) {
                  this.ruleForm={}
                  this.ruleForm.sort=0
                  this.$message({
                    message: res.msg,
                    type: 'success'
                  });
                  this.submitLoading = false
                  this.popup_add_show=false
                  this.getList(this.currentPage,this.page_limit,this.listQuery)
                }
              }).catch(() => {
              this.submitLoading = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //删除
      list_del(val) {
        let that = this
        menus_del(val.row.id).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.getList(this.currentPage, this.page_limit, this.listQuery)
          }
        })
      },
      //添加
      add(val) {
        this.ruleForm.is_top = false
        this.popup_add_show = true
      },
      handleChange(){
        let that = this
        console.log("222")
      },
      //修改
      edit(val) {
        this.diary_details=val
        console.log(this.$refs)
        // console.log(this.diary_details.hidden)
        // if(this.diary_details.hidden==1){
        //   this.diary_details.hidden=false
        // }else{
        //   this.diary_details.hidden=true
        // }
        // console.log(this.diary_details.hidden)
        this.popup_edit_show = true
        // this.diary_details = val.role_name
      },
      //修改提交
      submit_edit() {
        let that = this
        this.$refs.diary_details.validate((valid) => {
          if (valid) {
            console.log(that.diary_details, "fff")
            that.submitLoading = true
            menus_edit(that.diary_details).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                that.popup_edit_show = false
                that.submitLoading = false
                that.getList(this.currentPage,this.page_limit,this.listQuery)
              }
            })
          } else {
            console.log("输入框错误")
          }
        })
      }
    }
  }
</script>
<style type="text/css" scoped>
  .el-form-item--medium .el-form-item__content {
      line-height: 36px;
      width: 720px;
  }
  .sort-class{
    color: #67B5F4;
    font-size: 12px;
  }
  .add_over{
    height: 500px;
    overflow: auto;
    padding-right:20px;
  }
  .sortable-ghost {
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;
  }

  .fenye {
    padding: 20px 0px;
  }

  .el-range-editor.el-input__inner {
    width: 205px !important;
    padding: 3px 3px !important;
  }
</style>
